<template>
  <div id="apps">
    <div class="titleTb3">
      <div class="titletop">人员信息</div>

      <div class="box">
        <div class="boxone">
          <div class="boxoneleft">
            <select
              @change="handleOptionChange"
              name="select"
              class="namelist custom-arrow"
              v-model="selectedOption"
            >
              <option value="" style="display: none">姓名</option>
              <option
                v-for="(item, index) in messagelistall"
                :key="index"
                :value="item.username"
              >
                {{ item.username }}
              </option>
            </select>

            <input
              type="text"
              class="iptsearch"
              v-model="iptsearch"
              placeholder="请输入姓名"
            />

            <button class="leftbtn" @click="search">
              <img :src="'http://localhost:3002/upload/search.png'" alt="" />
              <span>搜索</span>
            </button>
          </div>

          <div class="boxoneright">
            <button class="rightbtnone" @click="openPopup()">
              <el-button type="primary" icon="el-icon-plus">新增</el-button>
            </button>

            <button class="rightbtntwo" @click="gototb4">
              <el-button type="primary" icon="el-icon-right">下一步</el-button>
            </button>
          </div>
        </div>

        <div class="boxtwo">
          <ul class="boxtwoul">
            <li class="boxli">身份</li>
            <li class="boxli">姓名</li>
            <li class="boxli">身份证号码</li>
            <li class="boxli">出生日期</li>
            <li class="boxli">性别</li>
            <li class="boxli">手机号码</li>
            <li class="boxli">参赛组别</li>
            <li class="boxli">邮箱</li>
            <li class="boxli">更新</li>
          </ul>
        </div>

        <div v-if="messagelist.length > 0" class="people" id="peopleList">
          <div
            v-show="demoflag"
            class="message"
            v-for="(item, index) in messagelist"
            :key="index"
          >
            <div class="have">
              <ul class="haveul">
                <li class="haveli">
                  {{ item.statusname }}
                </li>
                <li class="haveli">{{ item.username }}</li>
                <li class="haveli">{{ item.idcard }}</li>
                <li class="haveli">{{ item.birthday }}</li>
                <li class="haveli">{{ item.sex }}</li>
                <li class="haveli">{{ item.phone }}</li>
                <li class="haveli">{{ item.csgroup }}</li>
                <li class="haveli">{{ item.email }}</li>
                <li class="haveli" @click="update(item.id)">修改</li>
                <li class="haveli" @click="del(item.id)">删除</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="none" v-else>
          <span class="nonespan">没有相关人员信息</span>
        </div>

        <div class="bottom">
          <div class="ww">
            <button class="btnleft" @click="previousPage">
              <i class="el-icon-arrow-left"></i>
            </button>
            <div class="currentPage">
              <span>{{ currentPage }}</span>
            </div>

            <button
              class="btnleft"
              @click="nextPage"
              :disabled="currentPage === totalPages"
            >
              <i class="el-icon-arrow-right"></i>
            </button>

            <span class="gogo"></span>
            <input
              type="number"
              v-model="val"
              min="1"
              :max="pageSize"
              class="iptnumber"
            />
            <button class="btngo" @click="topage"><span>查询</span></button>
            <span class="count">共 {{ pageSize }} 页</span>
            <i @click="gorefresh" class="el-icon-back" id="shuaxin">
              返回第一页
            </i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function () {
    return {
      messagelist: [], // 人员信息
      demoflag: 1,
      messagelistall: [], // 所有人员新

      currentPage: 1, // 当前页码
      pageSize: 1, // 总页数
      totalItems: 0, // 总数据量
      items: [], // 当前页的数据列表
      val: "", // 目标页

      selectedOption: "", // 用于存储select选中的值--搜索
      iptsearch: "", // 用于双向绑定输入框的值
      updateflag: false,
    };
  },

  methods: {
    gorefresh() {
      // const inputPage = parseInt(this.val, 10);

      this.currentPage = 1;
      this.loadData(1);
    },
    // 修改
    update(id) {
      // console.log(id);
      this.openPopupCentered(
        "http://localhost:8848/addpeople?id=" + id,
        1000,
        500
      );
      this.fetchData();
    },

    // 删除
    del(id) {
      this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url: "http://localhost:3002/competition/staff/del",
            data: { id: id },
          })
            .then((res) => {
              // console.log(res.data);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              // 重新获取数据
              this.fetchData(); // 或者其他更新页面数据的逻辑
            })
            .catch((error) => {
              // console.error("删除失败:", error);
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 新增人员
    openPopup() {
      this.openPopupCentered("http://localhost:8848/addpeople", 1000, 500);
    },
    openPopupCentered(url, width, height) {
      // 获取屏幕宽度和高度
      var screenWidth = window.screen.width;
      var screenHeight = window.screen.height;

      // 计算窗口的left和top值，使得新窗口居中
      var left = Math.round((screenWidth - width) / 2);
      var top = Math.round((screenHeight - height) / 2);

      // 调用window.open，并设置窗口特性，包括left和top
      var windowFeatures = `width=${width},height=${height},left=${left},top=${top},location=yes,menubar=no,toolbar=no,status=no`;
      window.open(url, "_blank", windowFeatures);
    },

    // 监听selectedOption的变化:
    handleOptionChange() {
      this.messagelist = this.messagelistall.filter(
        (item) => item.username === this.selectedOption
      );
      this.scrollToFirstItem();
    },

    // 滚动到第一个列表项：
    scrollToFirstItem() {
      if (this.messagelist.length > 0) {
        const listContainer = document.getElementById("peopleList");
        const firstItem = listContainer.querySelector(".message");
        if (firstItem) {
          firstItem.scrollIntoView({ behavior: "smooth" });
        }
      }
    },

    // 搜索按钮：
    search() {
      const searchText = this.iptsearch.trim();
      console.log(searchText);
      if (searchText) {
        this.messagelist = this.messagelistall.filter((item) =>
          item.username.includes(searchText)
        );
      } else {
        return;
      }
      this.scrollToFirstItem();
    },

    // ------------------------
    // 去目标页：
    topage() {
      const inputPage = parseInt(this.val, 10);
      if (isNaN(inputPage) || inputPage < 1 || inputPage > this.totalPages) {
        this.val = "";
        return;
      }
      this.currentPage = inputPage;
      this.loadData(this.currentPage);
    },

    // 加载数据：
    loadData(page) {
      axios({
        url: "http://localhost:3002/staff/limit",
        method: "post",
        data: {
          page: page,
          limit: 9,
        },
      }).then((res) => {
        // console.log(res.data.list);
        this.messagelist = res.data.list;
        this.totalItems = res.data.list.length; // 每页有9条数据
      });
    },

    // 上一页
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.loadData(this.currentPage);
      }
    },

    // 下一页
    nextPage() {
      if (this.currentPage < this.pageSize) {
        this.currentPage++;
        this.loadData(this.currentPage);
      }
    },
    // 初始加载
    fetchData() {
      this.loadData(this.currentPage);
    },
    // ------------------------

    gototb4() {
      this.$emit("gototb4");
    },

    // 获取人员信息:
    getStaffOne() {
      axios({
        url: "http://localhost:3002/competition/staff/list",
        method: "post",
        data: {},
      }).then((res) => {
        // console.log(res.data.list);
        this.messagelist = res.data.list;
        this.messagelistall = res.data.list;
        const les = res.data.list.length;
        this.pageSize = Math.ceil(les / 9);
      });
    },
  },
  created() {
    const dataString = localStorage.getItem("updateOne");
    if (dataString != null) {
      const data = JSON.parse(dataString);
      setInterval(this.fetchData, 1000);
      localStorage.removeItem("updateOne");
    }
  },

  mounted() {
    this.getStaffOne();
    // 在组件挂载后加载数据
    this.fetchData();
  },

  computed: {
    // 计算每页的数量
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
  },
};
</script>

<style  lang="less" scoped>
.el-button--primary {
  background-color: #7c7e7c !important ;
}
#shuaxin {
  display: inline-block;
  margin-left: 20px;
  background-color: #7c7e7c;
  padding: 5px 5px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  text-align: right;
  margin-left: 950px;
  font-size: 13px;
}
#apps {
  .titleTb3 {
    width: 1400px;
    background-color: #edefe9;
    transform: scale(0.8) !important;
    margin: 0 auto;
    display: flex;
    justify-content: start;

    .box {
      width: 98.5%;
      height: 605px;
      background-color: #edefe9;

      margin: 8px 8px;
      border-radius: 2px;
      position: relative;

      //   姓名：
      .boxone {
        width: 99%;
        height: 40px;
        position: relative;

        .boxoneright {
          position: absolute;
          right: 0;
          // padding-top: 4px;
          transform: scale(0.7);
          background-color: #edefe9;
          .rightbtnone {
            margin-right: 10px;
            height: 25px;
            cursor: pointer;
            background-color: #edefe9;
          }
          .rightbtntwo {
            height: 25px;
            cursor: pointer;
          }

          button {
            line-height: 17px;
            border-radius: 4px;
            border: 1px solid #edefe9;
            img {
              width: 15px;
              height: 15px;
              margin: 0 6px;
              transform: translateY(10%);
            }
            span {
              margin: 0px 10px;
              margin-right: 15px;
            }
          }
        }

        .boxoneleft {
          position: absolute;
          left: 0;
          padding-top: 4px;
          .iptsearch {
            background: #fff;
            border: 1px solid rgb(31, 27, 27);
            height: 21px;
            margin: 0 10px;
          }
          select {
            /*关键：将默认的select选择框样式清除*/
            appearance: none;
            background: url("../assets/down.png") no-repeat scroll right center
              #fff;
            padding-right: 22px;
            background-size: 10px;
            width: 100px;
            height: 23px;
            padding-left: 4px;
            border-radius: 4px;
            color: #7f7f80;
          }
          .leftbtn {
            cursor: pointer;
            border-radius: 5px;
            border: 1px solid rgb(31, 27, 27);
            padding: 3px 7px;
            line-height: 18px;
            height: 23px;
            transform: translateY(10%);
            // margin-top: 2px;

            span {
              display: inline-block;
              margin-right: 9px;
              margin-left: 4px;
              height: 10px;
              transform: translateY(-18%);
              font-size: 12px;
            }
            img {
              width: 15px;
              height: 15px;
              margin-left: 5px;
            }
          }
        }
      }

      //   运动员代码：
      .boxtwo {
        width: 99%;
        height: 30px;
        color: #616163;
        background: linear-gradient(#f6f6f6, #e6e6e6);
        padding-top: 10px;
        .boxtwoul {
          //   background-color: red;
          list-style-type: none;
          margin: 0px;
          padding: 0;
          display: flex;
          justify-content: space-between;
        }
        .boxtwoli {
          display: inline;
          flex-grow: 1;
        }
      }

      //   数据：
      .message {
        width: 99%;
        height: 40px;
        background-color: #f4f6f8;
        color: black;
        font-size: 15px;
        font-weight: 600;
        transform: translateY(-37%);
        .have {
          transform: translateY(39%);

          .haveul {
            display: flex;
            justify-content: space-between;
            .haveli {
              display: inline;
              //   background-color: red;
              flex-grow: 1;
              width: 100px;
            }
          }
        }
      }
      .none {
        width: 99%;
        height: 40px;
        background-color: #eef7ff;
        color: black;
        font-size: 15px;
        font-weight: 600;
        background-color: #f4f6f8;
        text-align: center;
        .nonespan {
          display: inline-block;
          transform: translateY(50%);
        }
      }

      // 底部页码
      .bottom {
        background-color: #f4f6f8;

        border-radius: 2px;
        height: 55px;
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        transform: scale(1);

        .ww {
          align-content: center;
        }
      }
    }
  }
}
.titletop {
  // padding: 10px 40px;
  // // background-color: #7c7e7c;
  color: #fff;
  // margin-top: 50px;
  width: 30px;
  padding: 10px 20px;
  font-size: 18px;
  background: #7c7e7c;
}
.titleul {
  list-style-type: none;

  background: #7c7e7c;
  width: 20px;
  padding-right: 30px;
  color: #fff;
  transform: translateY(-16px);
  padding: 0px 0px;
}
.titleul > :first-child {
  // margin-right: 20px;
  background: #7c7e7c;
  display: flex;
  justify-content: flex-start;
  color: white;
  font-size: 18px;
}

.boxtwoul > :first-child {
  margin-left: 40px;
}
.boxtwoul > :last-child {
  margin-right: 20px;
  transform: translateX(-20%);
}

.leftbtn:active,
.rightbtnone:active,
.rightbtntwo:active {
  background-color: #ccc;
}

.gogo {
  margin: 0 6px;
  font-size: 13px;
}
.iptnumber {
  width: 40px;
  margin-right: 2px;
}
.count {
  margin: 7px;
  font-size: 13px;
}

.btnleft img {
  width: 10px;
  height: 10px;
}
.btnleft {
  width: 20px;
  height: 20px;
  // border-radius: 50%;
  border: 1px rgb(133, 131, 131) solid;
  cursor: pointer;
}
.btngo {
  width: 60px;
  height: 20px;
  font-size: 10px;
  padding-left: 20px;
  border: 1px #9a9b9c solid;
  transform: translateY(-10%);
  cursor: pointer;
}
.btngo span {
  display: inline-block;
  transform: translateX(-30%);
}

.currentPage {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  text-align: center;
  font-size: 14px;
  // color: #fff;
  background-color: #fff !important;
}

.haveul > :nth-child(3) {
  transform: translateX(20%);
}
.haveul > :nth-child(4) {
  transform: translateX(85%);
}
.haveul > :nth-child(5) {
  transform: translateX(100%);
}
.haveul > :nth-child(6) {
  transform: translateX(70%);
}
.haveul > :nth-child(7) {
  transform: translateX(107%);
}
.haveul > :nth-child(8) {
  transform: translateX(92%);
}
.haveul > :nth-child(9) {
  transform: translateX(85%);
  cursor: pointer;
}
.haveul > :nth-child(10) {
  transform: translateX(60%);
  color: #8f86bb;
  cursor: pointer;
}
.haveul > :nth-child(11) {
  transform: translateX(28%);
  color: #8f86bb;
  //   width: 10px;
  cursor: pointer;
}
.haveul > :nth-child(10):active {
  color: #ccc;
}
.haveul > :nth-child(11):active {
  color: #ccc;
}

// boxtwoul：类别
.boxtwoul > :nth-child(3) {
  transform: translateX(55%);
}
.boxtwoul > :nth-child(4) {
  transform: translateX(75%);
}
.boxtwoul > :nth-child(5) {
  transform: translateX(55%);
}
.boxtwoul > :nth-child(6) {
  transform: translateX(-25%);
}
.boxtwoul > :nth-child(7) {
  transform: translateX(-55%);
}
.boxtwoul > :nth-child(8) {
  transform: translateX(-245%);
}
.boxtwoul > :nth-child(9) {
  transform: translateX(-145%);
}
.boxtwoul > :nth-child(10) {
  transform: translateX(-65%);
}
</style>